<script lang="ts">
import { computed, defineComponent, ref } from "vue";
import { onUnload } from "@dcloudio/uni-app";
import { useList } from "@/hooks/page";
import { guider_info_share_note_list_api } from "@/package/guider/api/guider_didi";
import { note_info_api, common_like_api } from "@/api/guider_didi";
import { data_api } from "@/api/my";
import { EV_LOGIN, EV_NOTE } from "@/constant/event";
import { Window } from "@/utils/window";
import { Account } from "@/utils/account";
import { createWaterfall } from "@/utils/waterfall";
import { Router } from "@/utils/router";

import ListEmpty from "@/components/list/empty.vue";
import CommunityNoteItem from "@/pages/index/components/community-note-item.vue";
import CommunityNoteLike from "@/pages/index/components/community-note-like.vue";
import ListMore from "@/components/list/more.vue";

export default defineComponent({
  components: { ListEmpty, CommunityNoteItem, CommunityNoteLike, ListMore },
  props: {
    id: { type: String, required: true },
    isTeam: Boolean,
    isMy: Boolean,
  },
  setup(props) {
    onUnload(() => {
      uni.$off(EV_LOGIN, evLoginCallback);
      uni.$off(EV_NOTE, evNoteCallback);
    });

    const tempData = { queryData: { guider_id: "", work_id: "" } };
    if (props.isTeam) {
      tempData.queryData.work_id = props.id;
    } else {
      tempData.queryData.guider_id = props.id;
    }

    const { listData, listStatus, listLoadMore, reloadList, loadMoreList } =
      useList({ page: 1, page_size: 10 }, (query) => {
        return guider_info_share_note_list_api({
          ...query,
          ...tempData.queryData,
        });
      });
    reloadList();

    const noteList = computed(() => {
      return createWaterfall(
        listData.value.map((i) => {
          if (i.type === 3) {
            Object.assign(i, { width: 200, height: 290 });
          }
          return i;
        }),
        {
          baseWidth: Window.rpxToPx(336),
          columnHeight: [0, 0],
        }
      );
    });
    const noteClick = (index: number, index2: number) => {
      const note = noteList.value.columnData[index][index2] as any;
      Router.navigateTo(
        note.type === 2
          ? `/package/guider/pages/note/detail2?id=${note.id}`
          : `/package/guider/pages/note/detail?id=${note.id}`
      );
    };

    const myDataLikeList = ref<number[]>([]);
    const likeClick = (id: number) => {
      const fn = () => {
        const index = myDataLikeList.value.indexOf(id);
        index === -1
          ? myDataLikeList.value.push(id)
          : myDataLikeList.value.splice(index, 1);
        common_like_api({ id, type: 2 }).then(() => {
          uni.$emit(EV_NOTE, { type: "like", data: { type: "guider", id } });
        });
      };

      Account.isLogin
        ? fn()
        : Account.login(() => {
            reloadMyData().then(() => {
              // 没有点赞，则点赞
              myDataLikeList.value.includes(id) || fn();
            });
            Router.navigateBack();
          });
    };

    const reloadMyData = () => {
      return data_api<{ guide_share_note_like?: number[] }>({
        includes: "guide_share_note_like",
      }).then((resp) => {
        myDataLikeList.value = resp.guide_share_note_like || [];
      });
    };
    const evLoginCallback = (e: { type: "cancel" }) => {
      console.info(`触发事件：${EV_LOGIN}`, e);
      e.type === "cancel" || reloadMyData();
    };
    const evNoteCallback = (e: {
      type: "like";
      data: { type: "guider"; id: number };
    }) => {
      console.info(`触发事件：${EV_NOTE}`, e);
      if (e.type === "like" && e.data.type === "guider") {
        // 刷新状态
        reloadMyData();
        // 刷新数字
        note_info_api({ id: `${e.data.id}` }).then((resp) => {
          const index = listData.value.findIndex((i) => i.id === resp.id);
          listData.value[index].like_count_str = resp.like_count_str;
        });
      }
    };

    Account.isLogin && reloadMyData();
    uni.$on(EV_LOGIN, evLoginCallback);
    uni.$on(EV_NOTE, evNoteCallback);

    return {
      listData,
      listStatus,
      listLoadMore,
      loadMoreList,
      noteList,
      noteClick,
      myDataLikeList,
      likeClick,
    };
  },
});
</script>

<template>
  <scroll-view
    class="note"
    scroll-y
    @scroll="listLoadMore = true"
    @scrolltolower="loadMoreList"
  >
    <ListEmpty v-if="listData.length === 0 && listStatus === 'noMore'" />
    <template v-else>
      <view class="note-data">
        <view
          class="note-data-column"
          v-for="(i, d) of noteList.columnData"
          :key="d"
          :style="{ width: `${noteList.columnWidth}px` }"
        >
          <view
            class="note-data-item"
            v-for="(j, x) of i"
            :key="j.id"
            @click="noteClick(d, x)"
          >
            <CommunityNoteItem :info="j">
              <view class="note-data-like" @click.stop="likeClick(j.id)">
                <CommunityNoteLike
                  :text="j.like_count_str"
                  :isLike="myDataLikeList.includes(j.id)"
                />
              </view>
            </CommunityNoteItem>
          </view>
        </view>
      </view>
      <ListMore v-if="listLoadMore" :status="listStatus" safeAreaInsetBottom />
    </template>
  </scroll-view>
</template>

<style lang="scss">
.note {
  position: relative;
  height: 100%;

  .note-data {
    display: flex;
    justify-content: flex-start;
    padding-left: 30rpx;
    padding-top: 20rpx;
    padding-bottom: 1rpx;
  }

  .note-data-column {
    margin-right: 18rpx;
  }

  .note-data-item {
    margin-bottom: 20rpx;
  }

  .note-data-like {
    flex-shrink: 0;
    margin-left: 10rpx;
  }
}
</style>